<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>详细类别选择</title>
    <link rel="stylesheet" href="../plugins/layui/layui-v2.5.6/layui/css/layui.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/buycar.css">
    <link rel="stylesheet" href="../css/foot.css">
    <style>
        .product-class-mid{
            width: 96%;
    height: 480px;
    margin:auto;
    /* border: 1px solid black;      */
        }

    #search02{
    border: 2px solid green;
    width: 470px;
    height: 30px;
    text-indent: 22px;
}
.product02-class{
    width: 100%;
    height: 30px;
    margin:auto;
   
}
.product03-class{
    width: 100%;
    height: 30px;
    margin:auto;
   
   
}
.class-product-foot{
    width: 81%;
    height: 100px;
    margin:auto;
    /* border: 1px solid gray; */
}


    </style>
</head>
<body>
    <div id="buycar-outer">
        
        <script src="../plugins/layui/layui-v2.5.6/layui/layui.js"></script>
        <script src="../js/offies.js"></script>
        <script>


          layui.use(['form', 'element'], function(){
         var element = layui.element; 
        var form=layui.form;
     
     //监听导航点击
     element.on('nav(demo)', function(elem){
     //console.log(elem)
     layer.msg(elem.text());

     form.on('select(phone_type)', function(data){
        // console.log(data.elem.checked); //是否被选中，true或者false
        console.log(data.value); //复选框value值，也可以通过data.elem.value得到
    });
     });
    });


          //分页功能
    layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
     //完整功能
  laypage.render({
    elem: 'demo7'
    ,count: ${classTable.size()}
      ,limit:8

    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
    ,jump: function(obj){
      console.log(obj)
    }
  });
  // laypage.render({
  //   elem: 'demo20'
  //   ,count: data.length
  //   ,jump: function(obj){
  //     //模拟渲染
  //     document.getElementById('biuuu_city_list').innerHTML = function(){
  //       var arr = []
  //       ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
  //       layui.each(thisData, function(index, item){
  //         arr.push('<li>'+ item +'</li>');
  //       });
  //       return arr.join('');
  //     }();
  //   }
  // });
  
});

        </script>

                  
<div class="nav">
    <div style="padding-left: 80px;">
    <i class="layui-icon layui-icon-home" style="font-size: 20px; color: gray;"></i> 
   <a href="../index.jsp">店铺首页</a>
    <i class="layui-icon layui-icon-location" style="font-size: 20px; color: gray;"></i>
    安徽
    <div class="nav2">
        <span class="layui-breadcrumb" lay-separator="|" style="padding-left: 90px;">
            <a href="login.jsp">登录</a>
            <a href="register.jsp">注册</a>
            <a href="self-center.jsp">个人中心</a>
            <a href="order.jsp" style="padding-left:20px ;">我的订单</a>
            <a href="collect.jsp" style="padding-left:20px ;">我的生鲜</a>
            
            <a href="seckile.jsp" style="padding-left:20px ;">限时秒杀</a>
            <a href="../forum.html"style="padding-left:20px ;">好物推荐</a>
           
          </span>              
    </div>
    </div>
</div>


      

      
<div class="product-class-mid">

    <div class="buycar-rearch">
        <div class="nav-logo">
            <div class="search">
                <div class="layui-container">
                    <!-- 定义行 -->
                    <div class="layui-row">

                        <div class="layui-col-md3">
                    <img src="../img/logo.png" style="height: 90px; margin-top: 30px;">
                </div>
    
                <div class="layui-col-md7" style="margin-top: 50px; text-align: center;">
                    <span id="parent">
                        <span class="c1"></span>
                        <span>
                            <input type="text" id="search02" style="margin-left: 100px;">
                        </span>
                        <span style="position: relative;">
                            <a href="product-class.jsp"><button class="b1">搜索</button></a>
                            
                           
                        </span> 
                        
                    </span> 

                    <span class="layui-breadcrumb" lay-separator="|" style="padding-left: 90px;">
                        
                        <a href="product-class.jsp" style="margin-left: 50px ;">柚子</a>
                        <a href="product-class.jsp" style=" ;">柠檬</a>
                        <a href="product-class.jsp" style=" ;">橙子</a>
                        <a href="product-class.jsp" style=" ;">车厘子</a>
                        <a href="product-class.jsp" style=";">海鲜</a>
                        <a href="product-class.jsp" style=" ;">西瓜</a>
                        <a href="product-class.jsp" style=" ;">奇异果</a>
                        <a href="product-class.jsp" style=" ;">蓝莓</a>
                        
                      </span>              
                </div>

                <div class="layui-col-md1"  style="margin-top: 50px;">
                    <a href="buycar.jsp" class="layui-btn layui-btn-primary" style="margin-left: 100px;">我的购物车</a>
                </div>
                    </div>
                </div>
            </div>             
        </div> 
    </div>

            <hr class="layui-bg-gray">

            <div class="buycar-mid01">

                       <a >全部结果></a>
                       <a>水果></a> 
                       <a>柚子</a> 

            </div>
            <hr class="layui-bg-gray">
        
            

                <div class="product02-class">

                    <div class="layui-container">
                        <div class="layui-row">
                            <div class="layui-col-md1">
                           <a >品牌</a>
                           </div>

                            <c:forEach begin="1" end="10" step="1" items="${classTable}" var="item">
                                <div class="layui-col-md1" >
                                    <a style="color: blueviolet;">${item.productBrand}</a>
                                </div>
                            </c:forEach>

                       
                        
                        <div class="layui-col-md1" >
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                                <i class="layui-icon">更多</i>
                                <i class="layui-icon">&#xe624;</i>
                            </button>
                        </div> 


            
                         </div>
                     </div> 
                </div>
                
                <hr class="layui-bg-gray">
                <div class="product02-class">

                    <div class="layui-container">
                        <div class="layui-row">
                            <div class="layui-col-md1"">
                           <a >进口</a>
                           </div>
            
                        <div class="layui-col-md1" >
                            <a style="color: blueviolet;"> 国产</a> 
                        </div>
                        <div class="layui-col-md9" >
                            <a style="color: blueviolet;">进口</a> 
                        </div> 

                        
            
                         </div>
                     </div> 
                </div>

                <hr class="layui-bg-gray">

                <div class="product02-class">

                    <div class="layui-container">
                        <div class="layui-row">
                            <div class="layui-col-md1">
                                <a >产地</a>
                            </div>
                            <c:forEach items="${classTable}" begin="1" end="9" step="1" var="item">
                                <div class="layui-col-md1">
                                    <a >${item.productPlace}</a>
                                </div>
                            </c:forEach>


                        <div class="layui-col-md1" >
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                                <i class="layui-icon">更多</i>
                                <i class="layui-icon">&#xe624;</i>
                            </button>
                        </div> 
            
                         </div>
                     </div> 
                </div>

                <hr class="layui-bg-gray">

                <div class="product02-class">



                    <div class="layui-container">
                        <div class="layui-row">

                            <div class="layui-col-md1">
                                <a >热销时间</a>
                            </div>
                            <c:forEach items="${classTable}" begin="1" end="9" step="1" var="classtable">
                                <div class="layui-col-md1">
                                    <a >${classtable.productTime.toString()}</a>
                                </div>
                            </c:forEach>

                        

                        <div class="layui-col-md1" >
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                                <i class="layui-icon">更多</i>
                                <i class="layui-icon">&#xe624;</i>
                            </button>
                        </div> 

                        
                           



                        </div>
                     </div> 
                </div>
                <hr class="layui-bg-gray">

                <div class="product02-class">

                    <div class="layui-container">
                        <div class="layui-row">
                            <div class="layui-col-md1"">
                           <a >高级选项</a>
                           </div>
            
                        <div class="layui-col-md7" >
                            <select name="city" lay-verify="" >
                                <option value="">包装</option>
                              </select> 
                              <select name="city" lay-verify="" >
                                <option value="">售卖方式</option>
                                  <option value="">整箱</option>
                                  <option value="">散装</option>
                              </select> 
                              <select name="city" lay-verify="" >
                                  <c:forEach items="${classTable}" begin="1" end="9" step="1" var="weight">
                                      <option value="">${weight.productWeight}</option>
                                  </c:forEach>

                              </select> 
                              <select name="city" lay-verify="" >
                                <option value="">规格</option>
                              </select> 
                        </div>
            
                         </div>
                     </div> 
                </div>
        </div>

        <hr class="layui-bg-gray">


        <div class="class-product-foot">

            <div class="product04-class" style=" height: 30px; width: 100%;">

                <div class="layui-container">
                    <div class="layui-row">

                    <div class="layui-col-md9" >
                       

                          <div class="layui-btn-group">
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                                <i class="layui-icon">综合</i>
                                <i class="layui-icon">&#xe61a;</i>
                            </button>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                                <i class="layui-icon">销量</i>
                                <i class="layui-icon">&#xe61a;</i> 
                            </button>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                                <i class="layui-icon">评论数</i>
                                <i class="layui-icon">&#xe61a;</i>  
                            </button>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                                <i class="layui-icon">价格</i>
                              <i class="layui-icon">&#xe61a;</i> 
                            </button>
                          </div>
                    
                     </div>

                     <div class="layui-col-md1" >
                         <tr>共${classTable.size()}商品</tr>
                     </div>

                     <div class="layui-col-md1" >
                        <tr>1/100</tr>
                    </div>

                    <div class="layui-col-md1">
                        <div class="layui-btn-group">
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                              <i class="layui-icon">&#xe603;</i>
                            </button>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                              <i class="layui-icon">&#xe602;</i>
                            </button>
                          </div>
                    </div>



                     </div>
                 </div> 
            </div>

            <hr class="layui-bg-gray">

            <div class="product03-class" >

                <div class="layui-container">
                    <div class="layui-row">
                        <div class="layui-col-md1">
                       <a >配送至</a>
                       </div>
        
                    <div class="layui-col-md1" ></div>
                        <select name="city" lay-verify="" >
                            <option value="">选择收货地址</option>
                          </select> 
                    </div>
                     </div>
                 </div> 
            </div>

            <div class="product03" style="height: 350px; width: 100%; ">
                <div class="layui-container">
                    <div class="layui-row">
                        <c:forEach items="${classTable}" var="item">
                            <div class="layui-col-md3" style="border: 1px solid #efefef; text-align: center;">

                                <img src="../img/11.jpg" style="height: 200px; ">
                                <p style="font-size: 40px; color:red;">￥${item.productPrice}</p>
                                <p class="t-c">
                                    ${item.productDesc}</p>
                                <p class="t-c">46万+条评价</p>


                                <div class="site-demo-button" id="layerDemo" style="margin-top:20px ;">
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                                        <i class="layui-icon">&#xe68f</i>
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                                        <i class="layui-icon">&#xe657</i>
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" data-method="offset" data-type="auto">
                                        <i class="layui-icon">&#xe641</i>
                                    </button>
                                </div>

                            </div>
                        </c:forEach>



                        <div>
                        <div id="demo7"></div>
                        </div>
                     </div>
                </div>
            </div>
    </div>




</body>
</html>





           













   
